<template>
  <div class="public-header">
    <div class="public-header-back">
      <i class="iconfont icon-fanhui"></i>返回
    </div>
    <div class="public-header-time">
      {{ dateYear }} {{ dateDay }}
      <div class="time">{{ dateWeek }}</div>
    </div>
    <div class="public-header-name">
      <div class="public-header-name-title">{{ viewTitle }}</div>
    </div>
    <div class="public-header-weather"> 
      {{lower}}~{{higher}}
      <div class="weather">{{weather}}</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    viewTitle: {
      type: String,
      default: "",
    },
    imgPath: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      lower:'',
      higher:'',
      weather:'',
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ],
      timer: null,
    };
  },
  created(){
    this.getWeather() // 获取天气
  },
  mounted() {
      this.timer = setInterval(() => {
      const date = this.$dayjs(new Date());
      this.dateDay = date.format("HH:mm:ss");
      this.dateYear = date.format("YYYY-MM-DD");
      this.dateWeek = date.format(this.weekday[date.day()]);
    }, 1000);
  },
  // 销毁定时器
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    getWeather(){
      this.$axios
        .get("http://wthrcdn.etouch.cn/weather_mini?city=郑州")
        .then(res=> {
          this.weather = res.data.data.forecast[0].type ? res.data.data.forecast[0].type : ''
          this.lower = res.data.data.forecast[0].low.substr(2)
          this.higher = res.data.data.forecast[0].high.substr(2)
            console.log(res.data.data);
        })
        .catch(function(error) {
            console.log(error);
        });
    }
  },
};
</script>

<style scoped lang='scss'>
.public-header {
  width: 100%;
  height: 60rem;
  display: flex;
  justify-content: center;
  align-items: center;
  &-name {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    background: url("../../assets/img/header.png");
    // background: url('../../../assets/dataviewimg/view-header-left.png') no-repeat;
    background-size: 100% 100%;
    &-title {
      width: 300rem;
      height: 40rem;
      margin-left: 4rem;
      // background: url('../../../assets/dataviewimg/view-header-title.png') no-repeat;
      // background: url('../../assets/img/view-header-title.png');
      background-size: 100% 100%;
      line-height: 40rem;
      color: #bfe0ff;
      font-size: 20rem;
      font-weight: 600;
      text-align: center;
      letter-spacing: 5rem;
    }
  }
  &-time {
    position: absolute;
    left: 20%;
    top: 4%;
    width: 6%;
    height: 4%;
    color: #fff;
    font-size: 8rem;
    // background-color: black;
    .time{
      margin-top: 8%;
      margin-left: 60%;
    }
  }
  &-weather {
    position: absolute;
    right:20%;
    top: 4%;
    width: 6%;
    height: 4%;
    color: #fff;
    font-size: 8rem;
    // background-color: black;
    .weather{
      margin-top: 8%;
      margin-right: 60%;
    }
  }
  &-back {
    color: #fff;
    cursor: pointer;
    i {
      margin-left: 4rem;
      font-size: 10rem;
    }
  }
  &-opt {
    width: 100%;
    height: 30rem;
    margin-top: 15rem;
    display: flex;
    flex: 1;
    // background: url('../../../assets/dataviewimg/view-header-right.png') no-repeat;
    // background: url('../../assets/img/view-header-right.png');
    background-size: 100% 100%;
    color: #fff;
    font-size: 10rem;
    div {
      flex: 1;
      text-align: center;
      line-height: 20rem;
      margin-top: 6rem;
    }
    &-back {
      margin-left: 160rem;
      cursor: pointer;
    }
    i {
      margin-right: 4rem;
      font-size: 10rem;
    }
  }
}
</style>